<!DOCTYPE html>
<html>
	<head>
		<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3419308738737930"
		     crossorigin="anonymous"></script>
		<meta charset="utf-8">
		<title>千千万能工具箱-小文件上传(5M以内)</title>
		<style>
			p{
				font-size: 10px;
				color: red;
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h3 style="text-align: center;">{{title}}</h3>
			    <div style="text-align: center;">
					<input id="file" type="file" />
					<button @click="putFile()">上传</button>
					<div v-if="successUrl!=''"><span >上传成功!,链接为:{{successUrl}}</span></div>
					<br/>
						<br/>
							<br/>
					<p>请不要上传色情，暴力，违反法律法规的内容，违反者封禁IP，严重者移交公安机关处理</p>
					<p>不建议上传重要的文件，资料</p>
				</div>
				
		</div>
	</body>
	
	<script src="../js/aliyun-oss-sdk.min.js"></script>

	<script src="../js/vue2.6.11/vue.js"></script>

	<script src="../js/jquery.min.js"></script>
	
	<script>
		const rootUrl="https://lqcpws.cn/"
		const baseUrl = "https://api.lqcpws.cn"
		const app = new Vue({
			el: '#app',
			data: {
				title: '千千万能工具箱-小文件上传(5M以内)',
				stsInfo: undefined,
				client: undefined,
				userDir: '/tinyfile',
				maxFileSize:1024*1024*5,
				successUrl:"",
				refreshStsTime:1000*1200
			},
			mounted() {
	  $.ajax({
	  	type: 'get',
	  	url: baseUrl + "/pc/requestCountByDay",
	  	success: function(res) {
	  					  
	  					  
	  	}
	  					  
	  					  
	  })
				this.loadStsInfo()
				setInterval(function(that){
					console.log('自动刷新')
				that.loadStsInfo()
				},this.refreshStsTime,this)
			},
			methods: {
			
				loadStsInfo() {
					let _this = this
					$.ajax({
						type: 'post',
						url: baseUrl + '/aliYun/sts/getOssStsInfo',
						success(res) {
							_this.stsInfo = res.data;
							_this.client = new OSS({
								// yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
								region: 'oss-cn-shanghai',
								// 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
								accessKeyId: res.data.accessKeyId,
								accessKeySecret: res.data.accessKeySecret,
								// 从STS服务获取的安全令牌（SecurityToken）。
								stsToken: res.data.securityToken,
								refreshSTSToken: async () => {
							 	// 向您搭建的STS服务获取临时访问凭证。
								
									const info = await fetch(baseUrl + '/aliYun/sts/getOssStsInfo');
									return {
										accessKeyId: info.data.accessKeyId,
							 		accessKeySecret: info.data.accessKeySecret,
										stsToken: info.data.securityToken
									}
								},
								// 刷新临时访问凭证的时间间隔，单位为毫秒。
								refreshSTSTokenInterval: _this.refreshStsTime,
								// 填写Bucket名称。
								bucket: 'qq-gjx-pc'
							});
						
						}
					})
				},
				async putFile() {
					const file = document.getElementById("file");
					if(file.files.length==0){
						alert('请选择文件再上传！')
						return;
					}
					
			      if(file.files[0].size>this.maxFileSize){
				       alert('上传的文件不能大于5M！')
				      return;
			     }
			
					try {
						const options = {
							headers: {
								"Content-Type": file.files[0].type
							},
						};
						let fileName=file.files[0].name;
						fileName=new Date().getTime()+"-"+fileName
						const result = await this.client.put(this.userDir + "/"+fileName, file.files[0],
							options);
						this.successUrl=rootUrl+result.name
					} catch (e) {
						alert('上传失败请刷新页面重试！')
					}
				}
		
			}
		})
		
	</script>
</html>